<template>
    <div class="box1">

        <!-- 头部 -->
        <div style="position: sticky;width: 100%;top: 0;z-index: 10;">
            <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
                <template #right>
                    <van-icon name="share-o" size="18" />
                </template>
            </van-nav-bar>
        </div>

        <div class="swiper">
            <!-- 轮播图 -->
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(item, index) in Detailimg" :key="index">
                    <img :src="item.img_url" class="swiperimg" />
                </van-swipe-item>
            </van-swipe>

            <!-- 介绍 -->
            <div class="box2 padding">
                <div class="box2-1 color"><span class="box2-2">￥</span>{{ Detailinfo.retail_price
                }}<span class="box2-2">.00</span></div>
                <div class="box2-3">{{ Detailinfo.name }}</div>
                <div class="box2-4">{{ Detailinfo.goods_brief }}</div>
            </div>
        </div>

        <!-- 修饰 -->
        <div class="box3 box2-2">
            <div style="padding: 15px;">
                <div class="box2-3">
                    优惠
                    <span class="box3-1 color">满199减10</span>
                </div>
                <div class="box3-3">
                    <p><span class="box3-2 color">满减</span>每满279元，可减30元现金</p>
                </div>
            </div>
        </div>

        <div class="box4 box2-2">
            <div class="box4-1">
                <div class="box2-3">
                    已选
                    <span class="box4-2">{{ Detailinfo.name }}</span>
                </div>
                <div class="box4-3">
                    <p class="box4-4">本商品支持京选服务，点击可选服务</p>
                </div>
            </div>
            <div class="box4-5">
                <div class="box2-3">
                    送至
                    <span class="box4-6">北京市昌平区沙河镇北京科技职业学院</span>
                </div>
                <div class="box4-7">
                    <p><span class="box4-8">现货</span>现在下单，预计8月6日发货，8月9日送达</p>
                </div>
            </div>
            <div class="box4-9">
                <div class="box2-3">
                    运费
                    <span class="box4-10">免运费</span>
                </div>
            </div>
            <div class="box4-11">
                <van-icon name="passed" color="red" class="box4-12" />商家发货&售后
                <van-icon name="passed" color="red" class="box4-12" />七天无理由退货
                <van-icon name="passed" color="red" class="box4-12" />七天价保
                <van-icon name="passed" color="red" class="box4-12" />送运费险
                <van-icon name="passed" color="red" class="box4-12" />闪电退款
                <van-icon name="passed" color="red" class="box4-12" />极速审核
                <van-icon name="passed" color="red" class="box4-12" />可配送港澳台及海外
            </div>
        </div>

        <!-- 评价 -->
        <div class="box4-13">
            <div class="box4-14">
                <div class="box2-3">评价<span class="box4-15">10万+</span></div>
                <div class="box4-16">好评率95%</div>
            </div>
            <div class="box4-17">
                <div>
                    {{ Detailimgevaluate.content }}
                </div>
                <div class="box4-18">
                    时间：{{ Detailimgevaluate.add_time }}
                </div>
            </div>
        </div>

        <!-- 问题 -->
        <div class="box4-19 padding">
            <div class="box4-20">
                <div style="font-size: 16px;" class="box2-3">问答</div>
                <div class="box4-22">查看全部答案</div>
            </div>
            <div v-for="item in Detailproblem" :key="item.id">
                <p>问题：{{ item.question }}</p>
                <p>回答：{{ item.answer }}</p>
            </div>

        </div>

        <!-- 参数 -->
        <div class="box4-23 padding">
            <div class="box4-24">
                <div style="font-size: 16px;" class=" box2-3">参数</div>
            </div>
            <div v-for="item in Detailattr" :key="item.id">
                {{ item.name }}：{{ item.value }}
            </div>
        </div>

        <!-- 详情 -->
        <div class="img">
            <span v-html="Detailinfo.goods_desc"></span>
        </div>

        <!-- 相关产品 -->
        <div style="text-align: center;width: 100%;margin-top: 20px;font-size: 18px;">相关产品</div>
        <div style="display: flex;width: 100%;flex-wrap: wrap;">
            <div style="width: 50%;display: flex;flex-direction: column;" v-for="item in relatedList" :kye="item.id">
                <img style="width: 100%;height: 100%;" :src="item.list_pic_url" alt="">
                <span
                    style="width: 80%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;height: 100%;margin: 0 auto;">{{
                        item.name
                    }}</span>
                <span style="color: red;text-align: center;">￥{{ item.retail_price }}.00</span>
            </div>
        </div>

        <!-- 加入购物车 -->
        <div>
            <van-goods-action>
                <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
                <van-goods-action-icon icon="chat-o" text="客服" dot />
                <van-goods-action-icon icon="cart-o" text="购物车" to="/admin/shopping" badge="5" />
                <van-goods-action-button type="warning" @click="open" text="加入购物车" />
                <van-goods-action-button type="danger" text="立即购买" />
            </van-goods-action>
        </div>

    </div>
</template>
<script>
import { GetDetail, GetRelated, AddCart } from '@/http/api'

import Vue from 'vue'
import { Toast } from 'vant'

Vue.use(Toast)
export default {
  data () {
    return {
      // 获取详情页轮播图
      Detailimg: [],
      // 介绍
      Detailinfo: [],
      // 评价
      Detailimgevaluate: [],
      // 参数
      Detailattr: [],
      // 详情
      Detail: [],
      // 问题
      Detailproblem: [],
      // 相关产品
      relatedList: []
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      Toast('此为分享按钮，该功能没有完成，抱歉')
    },
    // 获取详情页
    getData () {
      const id = this.$route.query.id
      GetDetail(id).then(res => {
        this.Detailimg = res.data.data.gallery
        this.Detailinfo = res.data.data.info
        this.Detailimgevaluate = res.data.data.comment.data
        this.Detailattr = res.data.data.attribute
        this.Detailproblem = res.data.data.issue
        this.Detail = res.data.data.brand
      })
    },
    getList () {
      const { id } = this.$route.query
      GetRelated(id).then(res => {
        this.relatedList = res.data.data.goodsList
        console.log(this.relatedList)
      })
    },
    // 加入购物车
    open () {
      AddCart().then(res => {
        console.log(res)
      })
    }

  },
  mounted () {
    this.getData()
    this.getList()
    const vm = this
  }
}
</script>
<style scoped>
.img {
    margin-top: 10px;
    height: 100%;
    width: auto;
}

.img>>>img {
    width: 100%;
    height: 100%;
}

.box1 {
    background-color: #fafafa;
    height: auto;
    width: 100%;
    font-size: 16px;
}

.padding {
    padding: 10px
}

.color {
    color: red;
}

.swiper {
    background-color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.swiperimg {
    width: 100%;
    height: 30%;
}

.box2 {
    font-size: 18px;
}

.box2-1 {
    font-size: 20px;
}

.box2-2 {
    font-size: 14px;
}

.box2-3 {
    font-weight: bold;
}

.box2-4 {
    color: gray;
}

.box3 {
    margin-top: 10px;
    width: 100%;
    border-radius: 10px;
    background-color: white;
}

.box3-1 {
    border: 1px solid red;
    font-weight: 100;
    margin-left: 8px;
}

.box3-2 {
    margin-right: 5px;
    border: 1px solid red;
}

.box3-3 {
    margin-left: 40px;
    margin-top: 5px;
}

.box4 {
    margin-top: 10px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

.box4-1 {
    padding: 15px;
    border-bottom: 1px solid #fafafa;
}

.box4-2 {
    font-weight: 400;
    margin-left: 8px;
}

.box4-3 {
    margin-left: 40px;
    margin-top: 5px;
}

.box4-4 {
    margin-right: 5px;
    font-size: 12px;
    font-weight: 100;
}

.box4-5 {
    padding: 15px;
    border-bottom: 1px solid #fafafa;
}

.box4-6 {
    font-weight: 400;
    margin-left: 8px;
}

.box4-7 {
    margin-left: 40px;
    margin-top: 5px;
}

.box4-8 {
    margin-right: 5px;
}

.box4-9 {
    padding: 15px;
    border-bottom: 1px solid #fafafa;
}

.box4-10 {
    font-weight: 400;
    margin-left: 8px;
}

.box4-11 {
    padding: 15px;
    font-size: 12px;
    font-weight: 100;
    background-color: #fafafa;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.box4-12 {
    margin-right: 5px;
}

.box4-13 {
    margin-top: 20px;
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    background-color: white;
}

.box4-14 {
    display: flex;
    justify-content: space-between;
}

.box4-15 {
    margin-left: 10px;
    font-size: 12px;
}

.box4-16 {
    font-size: 12px;
}

.box4-17 {
    margin-top: 10px;
}

.box4-18 {
    font-size: 12px;
    margin-top: 10px;
}

.box4-19 {
    margin-top: 10px;
    border-radius: 10px;
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 400;
}

.box4-20 {
    display: flex;
    justify-content: space-between;
}

.box4-22 {
    font-size: 12px;
}

.box4-23 {
    margin-top: 10px;
    width: 100%;
    border-radius: 10px;
    background-color: white;
    font-size: 12px;
    box-sizing: border-box;
}

.box4-24 {
    display: flex;
    justify-content: space-between;
}
</style>
